Vue.component("common",{
    template:`
    <nav class="top-nav">
        <div class="nav-logo">
            <img src="../image/Bilibili.png" style="margin:30px;width: 34px; height: 34px;" @click="location.href = '../index.html'">
        </div>

        <ul class="nav-links">
            
            <li class="nav-item">
                <a href="../index.html" class="nav-link" >主站</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">番剧</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">会员购</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">动态</a>
            </li>
            
        </ul>

        <div class="nav-right" v-if="myinfo">
            <li><img :src="myinfo.headimg" width="" class="headimg" @click="location.href = '../me.html?id=' + myinfo.id"></li>
            <li @click="location.href = '../me.html?id=' + myinfo.id">欢迎: {{myinfo.name}}</li>
            <li class="nav-item">
                <a href="#" class="nav-link" @click="logout">退出</a>
            </li>
        </div>
        
        <div class="nav-right" v-else>
            <li><a href="#" @click.prevent="showLoginWin=true">注册</a></li>
            <li><a href="#" @click.prevent="showLoginWin=true">登录</a></li>
        </div>
         
    </div>
</div> 
        

    </nav>
    
    `,

    data(){
        return {
            myinfo:{},
            form:{
                username:"",
                password:"",
            },
            usernameColumn:null,
            showLoginWin: false
        }
    },
    created(){

        // 添加请求拦截器
        axios.interceptors.request.use(function (config) {
            // 在发送请求之前做些什么
            var jwt = sessionStorage.getItem("jwt");
            if (jwt) {
                config.headers.authorization = jwt;
            }
            return config;
        }, function (error) {
            // 对请求错误做些什么
            return Promise.reject(error);
        });


        // 添加响应拦截器
        axios.interceptors.response.use(function (response) {
            // 2xx 范围内的状态码都会触发该函数。
            // 对响应数据做点什么
            if (response.headers.authorization) {
                sessionStorage.setItem("jwt", response.headers.authorization);
            }
            return response;
        }, function (error) {
            // 超出 2xx 范围的状态码都会触发该函数。
            // 对响应错误做点什么
            return Promise.reject(error);
        });

        axios.get("b-user/login/myinfo").then(res=> {
            if (res.data.code == 1) {
                this.myinfo = res.data.data.user;
                console.log("myinfo",this.myinfo)
                this.$emit("logined",this.myinfo);
            }
        });
    },
    methods:{
        logout(){
            sessionStorage.removeItem('jwt');
            location.reload(false);
            location.href = '../index.html'
        },
    }
})
